<!DOCTYPE html>
<!-- saved from url=(0022)http://www.hasbei.com/ -->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/commone.css">
    <link rel="stylesheet" href="/css/amazeui.min.css">
    <link rel="stylesheet" href="/css/amazeui.cropper.css">
    <link rel="stylesheet" href="/css/custom_up_img.css">

    <link rel="stylesheet" media="screen and (min-width:481px)" href="/css/usercenter.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="/css/usercenter(1).css">
    <script src="/js/hm.js"></script>
    <script src="/js/hm(1).js"></script>
    <script type="text/javascript">
    //发送验证码
    function sendMail(param) {
        var newEmail = $("#inputEmail").val();
        var sendData = {};
        sendData["newEmail"] = newEmail;
        if(newEmail == ''){
            layer.msg("请输入邮箱！");
            return false;
        }
        //调用服务器发送验证码接口
        $.ajax({
            url: "/user_page/update/sendCode/email",
            type: "POST",
            data: sendData,
            success: function (datas) {
                if(datas.success){
                    layer.msg(datas.msg);
                    daojishi(90,param);
                }else{
                    layer.msg(datas.msg);
                }
            },
            error: function () {
                layer.msg("发送邮箱验证码时发生了错误！")
            }
        });
    }
    //提交时验证验证码是否正确
    function confirmMail() {
        var newEmail = $("#inputEmail").val();
        var checkcode = $("#code3").val();
        var emailData = {};
        emailData["newEmail"] = newEmail;
        emailData["checkcode"] = checkcode;
        if(newEmail == ''){
            layer.msg("请输入邮箱！");
            return false;
        }
        if(checkcode == ''){
            layer.msg("请输入验证码！");
            return false;
        }
        // 校验验证码接口
        $.ajax({
            url: "/user_page/update/confirm/email",
            type: "POST",
            data:emailData ,
            success: function (datas) {
                if(datas.success){
                    layer.msg(datas.msg);
                    layerClose(1500,true);
                }else{
                    layer.msg(datas.msg);
                }
            },
            error: function () {
                layer.msg("修改邮箱时发生了错误！")
            }
        });
    }
    function daojishi(seconds, obj) {
        if (seconds > 1) {
            $(obj).css("background-color", "#ccc");
            seconds--;
            $(obj).text(seconds + "s后重新发送").attr("disabled", true);//禁用按钮
            // 定时1秒调用一次
            setTimeout(function () {
                daojishi(seconds, obj);
            }, 1000);
        } else {
            $(obj).css("background-color", "#1482C8");
            $(obj).text("发送验证码").attr("disabled", false);//启用按钮
        }
    }
    var basePath = "/";</script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/footfixed.js"></script>
    <script src="/js/layer.js"></script>
    <script src="/js/amazeui.min.js"></script>
    <script src="/js/cropper.min.js"></script>
    <script src="/js/custom_up_img.js"></script>
    <script src="/js/md5.js"></script>
    <link rel="stylesheet" href="/css/layer.css" id="layuicss-layer">
    <title>个人信息</title></head>
<body rlt="1" style="">

    <div class="content">
        <div th:include="/user_page/usercenter_head :: usercenterhead"></div>
        <div class="content-main">
            <div class="main-info">
                <div th:include="/user_page/usercenter_left :: left"></div>


                <div class="main-user-right">
                    <div class="user-info-editor">
                        <div class="user-info-editor">
                            <div class="editor-top">
                                <h2>个人信息</h2>
                                <a href="/user_page/userindex" class="go-center"><span>返回个人中心主页</span>
                                    <img src="/icon/arrow-bttom.png" alt="有贝口腔网"></a>
                            </div>
                            <div class="change-info">
                                <div class="change-info-top">
                                    <div class="change-info-defa">
                                        <div class="defa-img"><a href="javascript:;">
                                            <img th:src="@{${loginUser.u_img_url}}" alt="有贝口腔网"></a></div>
                                        <div class="defa-text">
                                            <h3 class="h3-name"  th:text="${loginUser.u_name}"></h3>
                                            <p class="p-style"  th:text="${loginUser.u_mark}"></p>
                                        </div>
                                    </div>
                                    <div class="change-info-btn">修改信息</div>
                                </div>

                                <div class="change-info-show" style="display: none;">
                                    <div class="change-info-show">
                                        <div class="up-img-cover" id="up-img-touch">
                                            <img class="am-circle" id="user-photo" th:src="@{${loginUser.u_img_url}}">
                                            <span class="change-img-btn">更换头像</span>
                                        </div>
                                        <!--图片上传框弹框-->
                                        <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
                                            <div class="am-modal-dialog up-frame-parent up-frame-radius">
                                                <div class="am-modal-hd up-frame-header">
                                                    <label>上传头像</label>
                                                    <a href="javascript: void(0)" class="am-close am-close-spin"data-am-modal-close="">×</a>
                                                </div>
                                                <div class="am-modal-bd  up-frame-body">
                                                    <div class="am-g am-fl">
                                                        <div class="am-form-group am-form-file">
                                                            <div class="am-fl">
                                                                <button type="button" class="am-btn am-btn-default am-btn-sm choose-img">
                                                                    选择要上传的图片
                                                                </button>
                                                            </div>
                                                            <input type="file" id="inputImage">
                                                        </div>
                                                    </div>
                                                    <div class="am-g am-fl">
                                                        <div class="up-pre-before up-frame-radius">
                                                            <!--<img alt="" src="http://www.hasbei.com/user/center/getUserInfo" id="image">-->
                                                        </div>
                                                        <div class="up-pre-after up-frame-radius">
                                                        </div>
                                                    </div>
                                                    <div class="am-g am-fl">
                                                        <div class="up-control-btns">
                                                            <span onclick="rotateimgleft()">左转</span>
                                                            <span onclick="rotateimgright()">右转</span>
                                                            <span id="up-btn-ok">提交</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="writer-area">
                                        <div class="write-box">
                                            <p class="write-box-p">
                                                <input class="write-box-input" placeholder="输入你的昵称" maxlength="20" type="text"
                                                       th:value="${loginUser.u_name}">
                                                <span class="write-box-span"><i>0</i>/20</span>
                                            </p>
                                            <p class="weite-box-tip">2-20个汉字，请勿使用包含特殊符号或含有明显营销推广意图的媒体名</p>
                                        </div>
                                        <div class="write-box">
                                            <p class="write-box-p">
                                        <textarea class="write-box-textarea" placeholder="不要做懒人，给自己一个介绍吧"
                                                  maxlength="200"
                                                  type="text" th:text="${loginUser.u_mark}"></textarea>
                                                <span class="write-box-right"><i>0</i>/200</span>
                                            </p>
                                            <p class="weite-box-tip">良好的简介内容更容易收获用户的关注。填写建议个人介绍，内容介绍</p>
                                        </div>
                                        <div class="sub-btn">
                                            <div class="anniu sure-btn">保存</div>
                                            <div class="anniu close-btn">取消</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="login-other">
                                    <div class="login-other-title">登录方式</div>
                                    <div class="login-other-type">
                                        <div class="login-other-list">
                                            <div>
                                                <span class="change-obj">绑定手机</span>
                                                <!--th:text="showPhoneNum(123456)"-->
                                                <span class="change-obj-show" th:value="${loginUser.u_phone}"></span>
                                            </div>
                                            <div class="change-obj-btn" onclick="setPhone(this)">设置修改手机号</div>
                                        </div>
                                        <div class="login-other-list">
                                            <div>
                                                <span class="change-obj">修改邮箱</span>
                                                <span class="change-obj-show" th:text="${loginUser.u_mail}"></span>
                                            </div>
                                            <div class="change-obj-btn" onclick="setEmail(this)">设置修改邮箱</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="login-other">
                                    <div class="login-other-title">安全设置</div>
                                    <div class="login-other-type">
                                        <div class="login-other-list">
                                            <div>
                                                <span class="change-obj">密码设置</span>
                                            </div>
                                            <div class="change-obj-btn" onclick="setPwd(this)">设置登录密码</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                var _hmt = _hmt || [];
                (function () {
                    var hm = document.createElement("script");
                    hm.src = "https://hm.baidu.com/hm.js?4245936cbef31e434e2b387b56dfd7d8";
                    var s = document.getElementsByTagName("script")[0];
                    s.parentNode.insertBefore(hm, s);
                })();
            </script>
        </div>
        <!--修改手机号码-->
        <div id="update-phone" style="display: none">
            <style>
                .change-modul{
                    font-size: 14px;
                    color: #333;
                    margin: 20px;
                }
                .phone-p{
                    display: flex;
                    align-items: center;
                    margin: 30px 0;
                }
                .phone-p-title{
                    width: 80px;
                    text-align: right;
                    margin-right: 20px;
                }
                .text-tip{
                    margin-left:20px;
                    color:rgba(41,167,230,1);
                }
                .change-input{
                    width: 300px;
                    padding:8px 10px;
                    box-sizing: border-box;
                    outline: 0;
                    border:1px solid rgba(41,167,230,1);
                    border-radius: 5px;
                }
                .new-input{
                    width: 414px;
                    padding:8px 10px;
                    box-sizing: border-box;
                    outline: 0;
                    border:1px solid rgba(41,167,230,1);
                    border-radius: 5px;
                }
                .send-btn{
                    margin-left: 20px;
                    padding: 8px 0;
                    width: 94px;
                    border:0;
                    outline: 0;
                    background: rgba(41,167,230,1);
                    color:#fff;
                    border-radius: 5px;
                    cursor: pointer;
                }
                .check-btn{
                    margin-left: 20px;
                    padding: 8px 0;
                    width: 94px;
                    border:0;
                    outline: 0;
                    background: rgba(41,167,230,1);
                    color:#fff;
                    border-radius: 5px;
                    cursor: pointer;
                }
                .next-btn{
                    float: right;
                    padding: 8px 16px;
                    border:0;
                    outline: 0;
                    background: rgba(41,167,230,1);
                    background: #ccc;
                    color:#fff;
                    border-radius: 5px;
                    cursor: pointer;
                    margin-right: 30px;
                }
                .subm-btn{
                    float: right;
                    padding: 8px 16px;
                    border:0;
                    outline: 0;
                    background: rgba(41,167,230,1);
                    background: #ccc;
                    color:#fff;
                    border-radius: 5px;
                    cursor: pointer;
                    margin-right: 30px;
                }
            </style>
            <div class="change-modul">
                <div class="modul-div">
                    <p class="phone-p">
                        <span class="phone-p-title">原手机号</span>
                        <span th:text="${loginUser.u_phone}"></span>
                        <span class="text-tip"><a href="/about/leave" target="_blank">无法接收通知？去反馈</a></span>
                    </p>
                    <p class="phone-p">
                        <span class="phone-p-title">手机验证码</span>
                        <input class="change-input" type="text" placeholder="请输入短信验证码" id="code1">
                        <button type="button" class="check-btn" id="phone-sendEmail">发送验证码</button>
                    </p>
                    <button type="button" disabled="" class="next-btn">下一步</button>
                </div>

                <div class="next-step" style="display:none">
                    <p class="phone-p">
                        <span class="phone-p-title">新手机号</span>
                        <input class="new-input" type="text" placeholder="请输入新手机号">
                    </p>
                    <p class="phone-p">
                        <span class="phone-p-title">验证码</span>
                        <input class="change-input" type="text" placeholder="请输入短信验证码" id="code2">
                        <button type="button" class="send-btn" id="phone-sendEmail">发送验证码</button>
                    </p>
                    <button type="button" class="subm-btn">提交</button>
                </div>
            </div>
            <script>
                $(function(){
                    // $(".next-step").hide();
                    //第一步，发送验证码
                    $("#phone-sendEmail").click(function(){
                        var clickObj=this;
                        daojishi(3,clickObj);

                        //调用服务器发送验证码接口
                        $.post(basePath+"user_page/update/sendCode/email",function(datas){
                            if(datas.success){
                                daojishi(90,clickObj);
                            }else{
                                layer.msg(datas.msg);
                            }
                        });
                    })
                    //点击下一步
                    $(".next-btn").click(function(){
                        var checkcode = $("#code1").val();
                        if(checkcode == ''){
                            layer.msg("请输入验证码！");
                            return false;
                        }
                        // 校验验证码接口
                        $.post(basePath+"user_page/update/confirm/email?userName=xx&code="+checkcode,function(datas){
                            if(datas.success){
                                $(".modul-div").hide();
                                $(".next-step").show();
                            }else{
                                layer.msg(datas.msg);
                            }
                        });
                    });

                    //最后一步验证码
                    $("#phone-sendEmail").click(function(){
                        var  userName=$(".new-input").val();
                        if(isNotEmail(userName)){
                            layer.msg("请输入正确的邮箱");
                            return false;
                        }
                        var clickObj=this;
                        $.post(basePath+"user_page/update/new_sendCode/email?userName="+userName,function(datas){
                            if(datas.success){
                                layer.msg(datas.msg);
                                daojishi(90,clickObj);
                                changeSubmitButStatus();//改变提交按钮状态，颜色
                            }else{
                                layer.msg(datas.msg);
                            }
                        });
                    })
                    //最后一步提交//设置设置新密码
                    changeSubmitButStatus();
                    $(".subm-btn").click(function(){
                        var pwd2 = $("#pwd2").val();//确认密码
                        var  pwd=$("#pwd").val();//密码1
                        var pwdOld=$("#pwdOld").val();//旧密码
                        if(undefined!=pwdOld&&isBlank(pwdOld)){
                            layer.msg("请输入旧密码");
                            return false;
                        }
                        if(isBlank(pwd)||pwd.length<6){
                            layer.msg("新密码不能为空且不能小于6位长度");
                            return false;
                        }
                        if(pwd2!=pwd){
                            layer.msg("确认新密码错误！");
                            return false;
                        }
                        pwd=MD5(pwd);
                        if(undefined!=pwdOld){
                            pwdOld=MD5(pwdOld);
                        }
                        var pwdmsg = {};
                        pwdmsg["pwd"] = pwd;
                        pwdmsg["pwdOld"] = pwdOld;
                        $.ajax({
                            url: "/user_page/update/updatePwd",
                            type: "POST",
                            data:pwdmsg ,
                            success: function (data) {
                                if (data.success) {
                                    layer.msg(data.msg);
                                    layerClose(1500,true);
                                } else {
                                    layer.msg(data.msg);
                                }
                            },
                            error: function () {
                                layer.msg("修改密码时发生了错误！")
                            }
                        });
                    })

                    //设置提交按钮颜色
                    function changeSubmitButStatus(){
                        $(".subm-btn").css("background-color","#1482C8");
                    }
                    function daojishi(seconds,obj){

                        if (seconds > 1){
                            $(obj).css("background-color","#ccc");

                            $(".next-btn").attr("disabled", false).css("background-color","#1482C8");
                            seconds--;
                            $(obj).text(seconds+"s后重新发送").attr("disabled", true);//禁用按钮
                            // 定时1秒调用一次
                            setTimeout(function(){
                                daojishi(seconds,obj);
                            },1000);
                        }else{
                            $(obj).css("background-color","#1482C8");
                            $(obj).text("发送验证码").attr("disabled", false);//启用按钮
                            $(".next-btn").attr("disabled", true).css("background-color","#ccc");
                        }
                    }
                })
            </script>
        </div>

        <!--修改邮箱-->
        <div id="update-email" style="display: none">

            <div class="change-modul">
                <div class="next-step">
                    <p class="phone-p">
                        <span class="phone-p-title">新邮箱账号</span>
                        <input class="new-input" type="text" placeholder="请输入新邮箱" id="inputEmail">
                    </p>
                    <p class="phone-p">
                        <span class="phone-p-title">验证码</span>
                        <input class="change-input" type="text" placeholder="请输入验证码" id="code3">
                        <button type="button" class="send-btn" onclick="sendMail(this)">发送验证码</button>
                    </p>
                    <button type="button" style="float: right;" class="send-btn" onclick="confirmMail()">提交</button>
                </div>
            </div>
        </div>
        <!--修改密码-->
        <div id="update-pass" style="display: none">
            <div class="change-modul">
                <div class="next-step">
                    <p class="phone-p">
                        <span class="phone-p-title">输入旧密码</span>
                        <input class="new-input" type="password" placeholder="输入旧密码" id="pwdOld">
                    </p>
                    <p class="phone-p">
                        <span class="phone-p-title">输入新密码</span>
                        <input class="new-input" type="password" placeholder="输入新密码" id="pwd">
                    </p>
                    <p class="phone-p">
                        <span class="phone-p-title">确认新密码</span>
                        <input class="new-input" type="password" placeholder="确认新密码" id="pwd2">

                        <!-- <span class="phone-p-title">验证码</span>
                        <input class="change-input" type="text" placeholder="请输入验证码" id="code2">
                        <button type="button" class="send-btn" style="display:none">发送验证码</button> -->
                    </p>
                    <button type="button" class="subm-btn" style="background-color: rgb(20, 130, 200);">提交</button>
                </div>
            </div>
        </div>
            </div>
        <div th:include="/user_page/usercenter_footer :: footer"></div>
    </div>
    <script>

        $(".change-info-show").hide();
        $(".change-info-btn").click(function () {
            $(".change-info-top").hide();
            $(".change-info-show").show();
        })
        $(".change-obj-btn").click(function(){
            $(".change-modul").show();
        })
        $(".write-box-input").change(function () {
            var inputle = $(this).val().length;
            $(".write-box-span i").text(inputle);
        })
        $(".write-box-textarea").change(function () {
            var textareale = $(this).val().length;
            $(".write-box-right i").text(textareale);
        })
        $(".write-box-input").focus(function () {
            $(this).parent().css("border-color", "rgba(41,167,230,1)");
        })
        $(".write-box-input").blur(function () {
            $(this).parent().css("border-color", "#ddd");
        })
        $(".write-box-textarea").focus(function () {
            $(this).parent().css("border-color", "rgba(41,167,230,1)");
        })
        $(".write-box-textarea").blur(function () {
            $(this).parent().css("border-color", "#ddd");
        })


        $(".sure-btn").click(function () {
            var inputval = $(".write-box-input").val();
            var textareaval = $(".write-box-textarea").val();
            if (inputval == "") {
                layer.msg("请输入昵称");
                return false;
            }
            $(".h3-name").text(inputval);
            $(".p-style").text(textareaval);
            //更新用户信息
            //inputval 昵称  textareval 个性签名
            updateUserInfo(inputval, textareaval);
        })
        $(".close-btn").click(function () {
            $(".change-info-show").hide();
            $(".change-info-top").show();
        })

        //将提交过来的电话中间几位数用****替代
        function showPhoneNum(u_phone) {
            var hidePhone = "";
            if(u_phone == null || u_phone ==""){
                return hidePhone;
            }else{
                var hide = u_phone.slice(2,6);
                hidePhone = u_phone.replace(hide,"****");
                return hidePhone;
            }
        }

            // 修改手机号/邮箱
            function setPhone(obj) {
                alert("进来了")
                layer.open({
                    content: $('#update-phone'),
                    type: 1,
                    title: "设置手机号码",
                    shadeClose: false,
                    area: ['600px', '250px'],
                    fixed: false,
                    maxmin: false,
                });
            }
            function setEmail(obj) {
                layer.open({
                    content: $("#update-email"),
                    type: 1,
                    title: "设置电子邮箱",
                    shadeClose: false,
                    area: ['600px', '250px'],
                    fixed: false,
                    maxmin: false,
                });
            }
            function setPwd(obj) {
                layer.open({
                    type: 1,
                    title: "设置登录密码",
                    shadeClose: false,
                    area: ['600px', '310px'],
                    fixed: false,
                    maxmin: false,
                    content: $("#update-pass")
                });
            }
        //更新用户信息
        var logo = "";
        function updateUserInfo(nick, desc) {//nick 昵称  desc 个签mark logo 头像
            var updatemsg = {};
            updatemsg["nick"] = nick;
            updatemsg["userDesc"] = desc;
            updatemsg["logo"] = logo;
            $.ajax({
                url: "/user_page/updateUserInfo",
                type: "POST",
                data:updatemsg ,
                success: function (data) {
                    if (data.success) {
                        layer.msg(data.msg);
                        $(".change-info-show").hide();
                        $(".change-info-top").show();
                        location.href="/user_page/userinfo";
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    layer.msg("修改时发生了错误！")
                }
            });
        }


        $(function () {//绑定上传头像事件,上传头像
            $('#up-btn-ok').on('click', function () {
                // var $modal = $('#my-modal-loading');
                // var $modal_alert = $('#my-alert');
                var $modal = $('#doc-modal-1');
                var img_src = $image.attr("src");
                if (img_src == "") {
                    // set_alert_info("没有选择上传的图片");
                    // $modal_alert.modal();
                    layer.msg("没有选择上传的图片")
                    return false;
                }
                // $modal.modal();
                // var index = layer.load(1, {
                //     shade: [0.5,'#fff'] //0.1透明度的白色背景
                // });
                var url = basePath + 'upload?t=' + new Date().getTime();
                /*var canvas = $("#image").cropper('getCroppedCanvas');
                var data = canvas.toDataURL(); //转成base64
                var params = {};
                params["upfile"] = data.toString();*/
                var formData = new FormData();
                formData.append('file', document.getElementById('inputImage').files[0]);
                $.ajax({
                    url: url,
                    contentType: false,
                    processData: false,
                    type: "POST",
                    data: formData,
                    success: function (data, textStatus) {
                        // $modal.modal('close');
                        // set_alert_info(data.result);
                        // $modal_alert.modal();
                        if (data.success) {
                            logo = data.data;
                            $("#up-img-touch img").attr("src", logo);
                            layer.msg("上传头像成功");
                            // var img_name=data.file.split('/')[2];
                            // console.log(img_name);
                            // $("#pic").text(img_name);
                            $modal.modal('close');//关闭弹窗
                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error: function () {
                        layer.msg("图片上传失败了！")
                        // $modal.modal('close');
                        // set_alert_info("上传图片失败了！");
                        // $modal_alert.modal();
                        //console.log('Upload error');
                    }
                });

            });
        });

    </script>
</body>
</html>